<template>
  <div>
    <!-- 树形结构标题 -->
    <div class="tree-title"><span>指标</span></div>
    <!-- 搜索栏 -->
    <div class="tree-search">
      <el-input
        placeholder="请输入指标关键词"
        v-model.trim="searchVal"
        class="tree-search-input"
      >
        <i slot="suffix" class="tree-search-icon"></i>
      </el-input>
    </div>
    <!-- 树形结构 -->
    <div class="tree-list">
      <el-tree
        v-loading="treeLoading"
        :data="treeDataList"
        :props="defaultProps"
        :filter-node-method="filterNode"
        :default-expanded-keys="dKey"
        ref="tree"
        node-key="id"
        @node-click="nodeCLick"
        @node-contextmenu="rightClickEven"
        :highlight-current="true"
      >
        <template v-slot="{ node, data }">
          <!-- 自定义图标 -->
          <span class="custom-tree-node" :title="data.deslabel">
            <span>
              <!-- <img
                  v-if="!data.children && node.level !== 1 && node.level !== 2"
                  src="@/assets/images/search.png"
                  alt=""
                /> -->

              <img
                v-if="!node.expanded && node.level == 1"
                src="@/assets/images/folder.png"
                alt=""
              />

              <img
                v-else-if="node.expanded && node.level == 1"
                src="@/assets/images/folder-open.png"
                alt=""
              />

              <img
                v-else-if="!node.expanded && node.level == 2 && data.children"
                src="@/assets/images/folder.png"
                alt=""
              />

              <img
                v-else-if="node.expanded && node.level == 2 && data.children"
                src="@/assets/images/folder-open.png"
                alt=""
              />
            </span>
            <div
              style="display: flex"
              v-if="!data.children && node.level !== 1 "
            >
              <img
                :src="data.id === checkNodeId ? treeCheckImg : treeUnCheckImg"
              />
              <div :class="data.id === checkNodeId ? 'labelCheck' : 'label'">
                {{ node.label }}
              </div>
            </div>
            <div v-else>
              <div class="label" >
                {{ node.label }}
              </div>
            </div>
          </span>
        </template>
      </el-tree>
    </div>
  </div>
</template>

<script>
  export default {
    name: "testData",
    data() {
      return {
        searchVal: "", // 搜索tree
        expandTree: false, // 是否展开所有节点
        treeCheckImg: require("@/assets/images/treefile-select.png"), // 三级节点是否选中图标
        treeUnCheckImg: require("@/assets/images/treefile.png"),

        defaultProps: {
          children: "children",
          label: "label",
        },
        checkNodeId: "", // 选中节点id
        checkNode: {} // 选中节点
      };
    },
    props: {
      treeDataList: {
        type: Array,
        default: [],
      }, // 树形结构数据
      treeLoading: {
        type: Boolean,
        default: false
      }, // 树形结构loading
      dKey: {
        type: Array,
        default: []
      }, // 树形结构loading
      type: {
        type: Number,
        default: 1
      }, // 树形结构loading
    },

    watch: {
      searchVal(val) {
        // 搜索掉件为空 关闭所有节点
        this.$refs.tree.filter(val);
        if (!val) {
          this.$emit('getListTree')
        }
      },
      dKey(val) {
        if (val) {
          this.$nextTick(() => {
            if(this.type === 2){
              document.querySelector('.el-tree .el-tree-node__children  .el-tree-node').click()
            }
            if(this.type === 3){
              document.querySelector('.el-tree .el-tree-node__children .el-tree-node__children .el-tree-node').click()
            }
          });
        }
      }
    },
    created() {
    },
    methods: {
      // 查询树形结构数据
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },
      // 点击树形节点
      nodeCLick(node) {
        const nodeData = this.$refs.tree.getNode(node);
        console.log(nodeData)
        if (nodeData.level === 1) {
          this.checkNode.parents = node.id
        }
        if (nodeData.level === 2) {
          this.checkNode.parent = node.id
        }
        if(this.type === 2){
          if (nodeData.level === 2) {
            this.checkNode.node = node.id
            this.checkNode.label = node.label
            this.checkNodeId = node.id;
            this.$emit('nodeClick', this.checkNode)
          }
        }
        if (nodeData.level === 3 & this.type === 3) {
          this.checkNode.node = node.id
          this.checkNodeId = node.id;
          this.checkNode.parents = nodeData.parent.parent.data.id
          this.checkNode.parent = nodeData.parent.data.id
          this.$emit('nodeClick', this.checkNode)
        }
      },
      // 右键事件
      rightClickEven(e,data,node){
        if(this.type === 3){
          let param = {
            ...data,
            node: node
          }
          this.$emit('treeRrightClickEven',e,param)
        }
      }
    }
  };
</script>

<style scoped lang="scss">
  .tree-title {
    width: 100%;
    height: 42px;
    background: url("../../assets/images/treetitle.png") no-repeat;
    background-size: auto 100%;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;

    span {
      color: white;
      font-size: 16px;
      padding-top: 12px;
      padding-left: 60px;
      display: inline-block;
    }
  }

  .tree-search {
    width: 100%;
    height: 42px;
    padding: 0 19px;
    margin-top: 12px;
  }

  .tree-search-input {
    height: 36px;
    background: #ffffff;
    border-radius: 5px;
    border-color: #cacaca;
  }

  .tree-search-icon {
    display: block;
    width: 17px;
    height: 17px;
    background: url("../../assets/images/search.png") no-repeat;
    background-size: 100%;
    margin-right: 15px;
    margin-top: 10px;
    cursor: pointer;
  }

  .tree-list {
    width: 100%;
    padding: 0 19px;
    margin-top: 12px;
    min-height: 400px;
    overflow: auto;
    max-height: calc(100vh - 250px);
  }

  ::v-deep .el-tree {
    .el-tree-node__label {
      font-size: 16px;
    }

    // 竖线
    .el-tree-node {
      position: relative;
      padding-left: 8px;
    }

    .el-tree-node__expand-icon.expanded {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }

    //有子节点 且未展开
    .el-icon-caret-right:before {
      content: "";
    }

    //有子节点 且已展开
    .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
      content: "";
    }

    .el-tree-node__content {
      height: 30px;
      margin: 3px;
      border: 1px dashed #ffffff;
    }

    // // 划过颜色
    .el-tree-node__content:hover {
      height: 30px;
      border: 1px dashed #aed2ff;
      background-color: rgba(235, 244, 254, 1);
    }

    //选中颜色
    .el-tree-node:focus > .el-tree-node__content {
      height: 30px;
      border: 1px dashed #aed2ff;
      background-color: rgba(235, 244, 254, 1);
    }
  }

  .custom-tree-node {
    display: flex;

    img {
      width: 16px;
      height: 16px;
      margin-top: 3px;
    }

    .label {
      margin-left: 8px;
    }

  }
  .is-current{
    .labelCheck {
      margin-left: 8px;
      font-weight: bold;
      color: #5184ec;
    }
  }

</style>
